<template>
  <div class="calendar_container">
    <el-calendar ref="calendar">
      <!-- 自定义头部 -->
      <template #header="{ date }">
        <!-- 月份搜索 -->
        <el-button size="small" @click="$router.push('/')">返回首页</el-button>
        <el-icon @click="select('prev-year')" class="prev_year">
          <DArrowLeft />
        </el-icon>
        <el-icon @click="select('prev-month')" class="prev_month">
          <ArrowLeft />
        </el-icon>
        <span class="data">
          {{ date }}
        </span>
        <el-icon @click="select('next-month')" class="next_month">
          <ArrowRight />
        </el-icon>
        <el-icon @click="select('next-year')" class="next_year">
          <DArrowRight />
        </el-icon>
        <el-button size="small" @click="select('today')">回到今天</el-button>
      </template>
      <!-- 自定义日历单元格中显示的内容 -->
      <template #dateCell="{ data }">
        <!-- 显示日期，只保留天数 -->
        <p @click="logdata(data)" class="day">
          {{ data.day.split('-')[2] }}
        </p>
        <!-- 显示农历日期 -->
        <div v-if="getLunar(data.day).term" class="term">{{ getLunar(data.day).term }}</div>
        <div v-else class="dayCn">{{ getLunar(data.day).dayCn }}</div>
        <p>{{ data.isSelected ? '✔️' : '' }}</p>
        <!-- TODO:集成添加待办 -->
      </template>
    </el-calendar>

  </div>
</template>

<script setup>
import solarLunar from 'solarLunar';// 公历转农历npm包
import { ref } from 'vue';

// console.log(date.split(' ')[0] + '-0' + date.split(' ')[2]);
// 公历转农历的数据，传入要转化的公历日期，返回农历日期
function getLunar(day) {
  // 参数必须是数值类型，不能是字符串类型，Number() 和 parseInt() 方法可以将将字符串转化为数值类型
  // const dataNow = new Date().getFullYear() + ',' + (new Date().getMonth() + 1) + ',' + new Date().getDate();
  // 去掉日期的0前缀，拼接成 2022,8,7 格式
  const lunar = solarLunar.solar2lunar(Number(day.split('-')[0]), Number(day.split('-')[1]), Number(day.split('-')[2]));
  // 返回数值类型的农历日期
  return lunar;
}


// 日历组件上有一个ref属性，可以获取到组件实例，组件实例上有一个selectDate()方法，可以选择日期
const calendar = ref()
const select = (val) => {
  calendar.value.selectDate(val)
  console.log(calendar);
}
const logdata = (val) => {
  console.log(val);
}
</script>

<style lang="less" scoped>
.day {
  font-size: 18px;
  font-weight: bold;
}

// 24节气的样式
.term {
  font-size: 14px;
  font-weight: bold;
  color: #DD4868;
  // 不换行
  white-space: nowrap;
}

// 农历天数的样式
.dayCn {
  font-size: 14px;
  // 不换行
  white-space: nowrap;
}

// 日历天数卡片居中布局
:deep(.el-calendar) {
  border: 1px solid #efeff5;
  border-radius: 4px;
}

:deep(.el-calendar-table .el-calendar-day) {
  display: grid;
  align-content: center;
  justify-items: center;
  align-items: center;
  justify-content: center;
}

// 日历天数的hover样式
:deep(.el-calendar-table .el-calendar-day:hover) {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

// 激活选中日历天数的颜色
:deep(.el-calendar-table td.is-selected) {
  background-color: var(--el-calendar-selected-bg-color);
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

// 日历组件自定义头部样式穿透
:deep(.el-calendar__header) {
  align-items: center;
}

.calendar_container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

// 上一年
.prev_year {
  &:hover {
    color: #1890ff;
    cursor: pointer;
  }
}

// 上一月
.prev_month {
  &:hover {
    color: #1890ff;
    cursor: pointer;
  }
}

// 下一月
.next_month {
  &:hover {
    color: #1890ff;
    cursor: pointer;
  }
}

// 下一年
.next_year {
  &:hover {
    color: #1890ff;
    cursor: pointer;
  }
}

// 日期
.data {
  // font-size: 20px;
  font-weight: bold;
  color: #1890ff;
  // 不换行
  white-space: nowrap;
}
</style>